<template>
  <view class="dy-scroll-container">
    <dy-navbar title="grid宫格布局" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" desc="一行4列 col:4" />
        <template slot="body">
          <dy-grid square col="4" :gap="13">
            <dy-grid-item
              v-for="index in $dy.common.generateArray(0, 11)"
              :key="index"
              :index="index"
            >
              <view class="dy-h-100P dy-flex-column-center">{{ index }}</view>
            </dy-grid-item>
          </dy-grid>
        </template>
      </dy-card>
      <!-- 九宫格 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="九宫格" desc="col:3" />
        <template slot="body">
          <dy-grid square col="3">
            <dy-grid-item
              v-for="index in $dy.common.generateArray(0, 8)"
              :key="index"
              :index="index"
            >
              <view class="dy-h-100P dy-flex-column-center">{{ index }}</view>
            </dy-grid-item>
          </dy-grid>
        </template>
      </dy-card>
      <!-- 每列间隔 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="每列间隔" desc="col:6 gap:20" />
        <template slot="body">
          <dy-grid square col="6" :gap="20">
            <dy-grid-item
              v-for="index in $dy.common.generateArray(0, 17)"
              :key="index"
              :index="index"
            >
              <view class="dy-h-100P dy-flex-column-center">{{ index }}</view>
            </dy-grid-item>
          </dy-grid>
        </template>
      </dy-card>
      <!-- 隐藏边框 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="隐藏边框" desc="border: false" />
        <template slot="body">
          <dy-grid :border="false" square col="5">
            <dy-grid-item
              v-for="index in $dy.common.generateArray(0, 14)"
              :key="index"
              :index="index"
            >
              <view class="dy-h-100P dy-flex-column-center">{{ index }}</view>
            </dy-grid-item>
          </dy-grid>
        </template>
      </dy-card>
      <!-- 菜单图标 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="菜单图标" desc="slot dy-icon" />
        <template slot="body">
          <dy-grid square col="4" :gap="13">
            <dy-grid-item v-for="(icon, index) in icons" :key="icon.id" :index="index">
              <view class="dy-h-100P dy-flex-column-center">
                <dy-icon :name="icon.font_class" custom-class="dy-primary dy-fz-48" dot />
                <view class="dy-fz-24 dy-mg-top-8 dy-light-gray dy-text-nowrap">
                  {{ icon.name }}
                </view>
              </view>
            </dy-grid-item>
          </dy-grid>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Grid',
  data() {
    return {
      icons: [
        {
          name: '活动日程',
          font_class: 'activity-fill'
        },
        {
          name: '过滤器',
          font_class: 'filter-fill'
        },
        {
          name: '消息',
          font_class: 'message-copy'
        },
        {
          name: '过滤',
          font_class: 'filter'
        },
        {
          name: '不可见',
          font_class: 'eyeclose-fill'
        },
        {
          name: '可见',
          font_class: 'eye'
        },
        {
          name: '增加',
          font_class: 'add'
        },
        {
          name: '活动信息',
          font_class: 'activity'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped></style>
